<template>
	<view class="search">
		<!-- 头部 -->
		<view @click="goBack" class="padd_32 header clearfix">
			<view class="fl">
				<image class="fl" src="/static/images/search.png" mode="widthFix"></image>
			</view>
			<view class="fr">
				<image src="/static/images/search.png" mode="widthFix"></image>
				<input type="text" value="" placeholder="搜索"/>
			</view>
		</view>
		<!-- end -->
		
		<!-- 筛选 -->
		<view class="screen padd_32 clearfix">
			<view class="fl">
				全城
				<image src="/static/images/home.png" mode="widthFix"></image>
			</view>
			<view class="fr">
				筛选
				<image src="/static/images/home.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- end -->
		
		<!-- 列表数据 -->
		<view class="lists padd_32">
			<service-list ref="mescrollItem" :i="0" :index="tabCur"></service-list>
		</view>
		<!-- end -->
	</view>
</template>

<script>
	import ServiceList from '@/components/list/ServiceList.vue';
	export default {
		components: {
			ServiceList
		},
		data() {
			return {
				tabCur:''
			}
		},
		onLoad(option){
			var _this = this
			_this.tabCur = option.id
			console.log(option.id)
		},
		methods: {
			goBack(){
				this.$Router.back();
			}
		}
	}
</script>

<style scoped lang="scss">
/* 导航 */
.header {
	height: 95rpx;
	width: 100%;
	background: #fff;
	line-height: 95rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	font-size: 24rpx;
	color: #333;
	font-weight: 500;
}
.header image {
	margin-top: 26rpx;
	width: 38rpx;
}
.header .fl text {
	margin-left: 14rpx;
}
.header .tab{
	margin-left: 120rpx;
}
.header .tab text{
	text-align: center;
	display: inline-block;
	font-size: 32rpx;
	color: #666;
	position: relative;
}
.header .tab .tit{
	margin-right: 90rpx;
}
.header .tab .tit:last-child{
	margin-right: 0;
}
.header .tab .cur_sp{
	position: absolute;
}
.header .tab .cur{
	font-weight: 500;
	color: #333;
}
.header .tab .cur .cur_sp{
	width: 30rpx;
	height: 4rpx;
	background: $uni-color1;
	border-radius: 2rpx;
	right: 17rpx;
	bottom: 0;
}
.header .fr{
	position: relative;
	line-height: 60rpx;
	font-size: 28rpx;
	margin-top: 16rpx;
}
.header .fr input{
	width: 560rpx;
	height: 60rpx;
	background-color: #F6F6F7;
	border-radius: 30rpx;
	padding-left: 60rpx;
}
.header .fr image{
	position: absolute;
	width: 28rpx;
	top: -12rpx;
	left: 24rpx;
}
/* 筛选 */
.screen{
	width: 100%;
	font-size: 26rpx;
	color: #666;
	padding: 28rpx 32rpx 31rpx 32rpx;
	line-height: 55rpx;
	position: fixed;
	left: 0;
	top: 95rpx;
	background-color: #fff;
	z-index: 100;
}
.screen .fl{
	font-size: 24rpx;
	padding: 0 24rpx;
	height: 55rpx;
	border-radius: 10rpx;
	background: #F6F6F7;
}
.screen .fl image{
	width: 16rpx;
	margin-left: 6rpx;
}
.screen .fr image{
	width: 25rpx;
	margin-left: 2rpx;
}
</style>
